<template>
<div>
  <el-row style="height: 4vh;width: 100%;display: flex;flex-direction: row">
    <span class="left">
    <strong>当前设备：{{id}}</strong>
    </span>
    <span class="right">
    <strong>{{dateFormat(date)}}</strong>
    </span>

  </el-row>


  <el-row style="height: 38vh;width: 100%;">

    <el-col :span="24" style="height: 100%;">
      <div id="top" style="width: 100%;height: 100%;margin: 1%"></div>
    </el-col>

  </el-row>


    <el-row style="height: 38vh;width: 100%;">
      <el-col :span="8" style="height: 100%;">

            <el-table style="margin-top: 7%" height="35vh" :data="staticsTable" :header-cell-style="{backgroundColor:'#D1DAEA',color:'black',fontWeight:'blod'}" :cell-style="staticsTableStyle" size="mini">
              <el-table-column prop="temperature" label="温度"> </el-table-column>
              <el-table-column prop="times" label="频次">  </el-table-column>
              <el-table-column prop="f" label="频率"></el-table-column>
            </el-table>

      </el-col>
      <el-col :span="16" style="height: 100%;">
        <div id="bottom" style="width: 100%;height: 100%;margin: 1%"></div>
      </el-col>




  </el-row>
</div>

</template>

<script>

import * as echarts from 'echarts'
import { barData,barSearchArgs,zhexianData,zhexianSearchArgs} from '../../../../api/dianqigui/data-engine'
import { serachDataCloudList } from '../../../../api/dianqigui/data-cloud'

export default {
  name: "detail",
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      // lineArgs:new zhexianSearchArgs(),
      // barArgs:new barSearchArgs(),
      lineX:[],
      lineY:[],
      barX:[],
      barY:[],
      date: new Date(),
      year: "",
      month: "",
      day: "",
      hours:"",
      seconds:"",
      staticsTable:[],
      seriesId:'',
      test:{},
      option1:{},
      option2:{},
      myChart1:{},
      myChart2:{}

    };
  },
  created() {
    this.getInformation();
  },
  mounted() {
    let _this = this;
    (this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000))


    setTimeout(()=>{
      this.topShow()
      this.bottomShow()
    },1000)
    this.getTableData()


  },

  methods:{

    getTableData(){

      let total=0;
      for(let i=0;i<this.barY.length;i++){
        total+=this.barY[i]
      }
      for(let i=0;i<this.barX.length;i++){
        let obj={
          temperature:'',
          times:'',
          f:0
        }
        obj.temperature=this.barX[i]
        obj.times=this.barY[i]
        obj.f=parseFloat(this.barY)/total
        this.staticsTable.push(obj)
      }
    },
    async getInformation(){
      const res1 = await serachDataCloudList(0,100)
      const list1 = res1.data.list
      for (let i = 0; i < list1.length; i++) {
        if (list1[i].id == this.id) {
          this.matchResult = list1[i]
        }
      }
      this.seriesId=this.matchResult.f011

      const res2 = await zhexianData(this.seriesId)
      const list2 = res2.data.list
      //console.log(list2.length)
      for(let i=0;i<list2.length;i++){
        this.lineX[i]=list2[i].time.slice(6,8)+":"+list2[i].time.slice(8,10)
        this.lineY[i]=parseFloat(list2[i].temperatue)

      }

      const res3 = await barData(this.seriesId)
      const list3 = res3.data.list
      for(let i=0;i<list3.length;i++) {
        this.barX[i] = parseInt(list3[i].temperature)
        this.barY[i] = parseFloat(list3[i].times)
      }

      let total=0.0;
      for(let i=0;i<this.barY.length;i++){
        total+=this.barY[i]
      }
      for(let i=0;i<this.barX.length;i++){
        let obj={
          temperature:'',
          times:'',
          f:""
        }
        obj.temperature=this.barX[i]
        obj.times=this.barY[i]
        obj.f=(parseFloat(this.barY[i])/total).toFixed(4)
        this.staticsTable.push(obj)
      }
    },
    staticsTableStyle:function ({rowIndex}){
      if(rowIndex%2==1){
        return "background:#D1DAEA"
      }
    },
    topShow: function () {
      this.myChart1 = echarts.init(document.getElementById('top'));
      this.option1= {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          name:"时间",
          type: 'category',
          boundaryGap: false,
          data: this.lineX
        },
        yAxis: {
          name:"温度",
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '温度',
            type: 'line',
            data: this.lineY,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'},
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          },
        ]
      };
      console.log(this.option1)
      this.myChart1.setOption(this.option1);
    } ,
    bottomShow: function () {
        this.option2= {
          tooltip: {
            trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
            {
              name:"温度",
              type: 'category',
              data:this.barX,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
            yAxis: [
            {
              name:"频次",
              type: 'value'
            }
          ],
            series: [
            {
              name: '频次',
              type: 'bar',
              barWidth: '60%',
              data: this.barY,
            }
          ]
        }
      this.myChart2 = echarts.init(document.getElementById('bottom'));
      this.myChart2.setOption(this.option2);
    } ,
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  }

}
</script>

<style scoped>
.left{
  letter-spacing:5px;
  background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size: 20px;
}
.right{
  letter-spacing:2px;
  background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size: 20px;
  margin-left: auto;
  margin-right: 10px;
}

</style>
